<template>
	<!-- 剪裁图片组件 -->
  <van-overlay 
    :show="visible"
    closeable
    z-index="99"
    :lock-scroll="false"
    :style="{ height: '100%' }"
  >
    <div class="flex_align_center height_auto">
      <div class="flex1" >
        <VueCropper
          ref="imageCropper"
          :img="url"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :full="option.full"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          :high="option.high"
          :mode="option.mode"
        ></VueCropper>
      </div>
      <div class="fz-14 flex_b_c white h_60">
        <div class="p-2" @click="onCancel">取消</div>
        <div class="p-2 text-center" @click="rotateImage">旋转</div>
        <div class="p-2 text-right" @click="onConfirm">确定</div>
      </div>
    </div>
  </van-overlay >
</template>
<script setup>
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
import { ref } from 'vue'
let props = defineProps({
  url: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
let emits = defineEmits(['on-cancel', 'on-success'])
let imageCropper = ref('')
let option = ref({
  outputSize: 0.8,
  info: false, // 裁剪框的大小信息
  outputType: 'jpeg', // 裁剪生成图片的格式
  canScale: false, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度
  autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度
  high: true, // 是否按照设备的dpr 输出等比例图片
  fixedBox: true, // 固定截图框大小 不允许改变
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例
  full: true, // 是否输出原图比例的截图
  canMoveBox: true, //截图框能否拖动 
  canMove: false, // 上传图片能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  mode: '100% auto' // 图片默认渲染方式
})
function rotateImage() {
  //旋转图片
  imageCropper.value.rotateRight();
}
function onCancel() {
  //取消
  emits('on-cancel');
}
function onConfirm() {
  //确定 base 64 getCropData
  // bolb getCropBlob
  imageCropper.value.getCropBlob(file => {
    emits('on-success', file)
  });
}

</script>
<style>
.height_auto {
	height: 100vh;
}
.flex_align_center {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-content: center;
}
.white {
  color: #fff;

}
.flex_b_c {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h_60 {
  height: calc(60px + constant(safe-area-inset-bottom));
  height: calc(60px + env(safe-area-inset-bottom));
  padding:0 15px;
  font-size: 16px;
}
.flex1 {
  flex: 1
}
 .vue-cropper {
  background: #000;
}
.vue-cropper .cropper-view-box {
  outline: 1px solid #fff !important;
  outline-color: #fff !important;
}

</style>


